<template>
    <div style="height:100%;width:100%;">
        <bar class="bar" @on-back="$router.back()" title="帮助中心"></bar>
        <grid :rows="4" class="help-grid">
            <grid-item link="/platInfo" label="商户平台功能">
                <i  slot="icon" class="iconfont icon-shanghu help-green"></i>
            </grid-item>
            <grid-item link="/helpInfo?index=boxDesc" label="盒子介绍">
                <i slot="icon" class="iconfont icon-hezi help-blue"></i>
            </grid-item>
            <grid-item link="/helpInfo?index=icBenifit" label="IC好处">
                <i slot="icon" class="iconfont icon-icon_yinhangqia help-green"></i>
            </grid-item>
            <grid-item link="/helpInfo?index=special" label="系统特点">
                <i slot="icon" class="iconfont icon-shezhi help-blue"></i>
            </grid-item>
        </grid>
        <group title="热点问题">
            <cell title="IC卡如何操作" is-link link="/helpInfo?index=icOper"></cell>
            <cell title="加油机如何操作" is-link link="/helpInfo?index=fuelOper" ></cell>
        </group>
    </div>
</template>

<script>
    import {
        Bar
    } from 'muka-ui'
    import {
        Grid,
        GridItem,
        Group,
        Cell
    } from 'vux'
    export default {
        name: 'help',
        components: {
            Bar,
            Grid,
            GridItem,
            Group,
            Cell
        }
    }

</script>

<style lang="less">
    .help-search {
        line-height: 30px;
    }

    .help-grid {
        background: white;
        .weui-grid {
            padding: 20px 0px;
            &:before {
                border: 0px;
            }
        }
        .iconfont {
            font-size: 28px;
        }
    }

    .help-green {
        color: #44b549;
    }

    .help-blue {
        color: #478bc5;
    }

</style>
